<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-massage-show
  [help_massage_content]="'alert.help.setting' | i18n"
  [guild_link]="'alert.help.center.setting' | i18n"
  [module_name]="'menu.alert.setting'"
  [icon_name]="'calculator'"
></app-help-massage-show>
<nz-divider></nz-divider>
<div style="margin-bottom: 20px">
  <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
    <i nz-icon nzType="sync" nzTheme="outline"></i>
  </button>
  <button nz-button nzType="primary" (click)="onNewAlertDefine()">
    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
    {{ 'alert.setting.new' | i18n }}
  </button>
  <button nz-button nzType="primary" nzDanger (click)="onDeleteAlertDefines()">
    <i nz-icon nzType="delete" nzTheme="outline"></i>
    {{ 'alert.setting.delete' | i18n }}
  </button>

  <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
    {{ 'common.button.operation.more' | i18n }}
    <span nz-icon nzType="down"></span>
  </button>
  <nz-dropdown-menu #more_menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item>
        <button nz-button nzType="primary" (click)="onExportDefines()">
          <i nz-icon nzType="export" nzTheme="outline"></i>
          {{ 'alert.setting.export' | i18n }}
        </button>
      </li>
      <li nz-menu-item>
        <nz-upload nzAction="/alert/defines/import" [nzLimit]="1" [nzShowUploadList]="false" (nzChange)="onImportDefines($event)">
          <button nz-button nzType="primary">
            <i nz-icon nzType="import" nzTheme="outline"></i>
            {{ 'alert.setting.import' | i18n }}
          </button>
        </nz-upload>
      </li>
    </ul>
  </nz-dropdown-menu>
  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="loadAlertDefineTable()">
    {{ 'common.search' | i18n }}
  </button>
  <input
    style="margin-right: 5px; float: right; width: 200px; border-radius: 9px; text-align: center; margin-right: 0"
    nz-input
    type="text"
    [placeholder]="'alert.setting.search' | i18n"
    nzSize="default"
    (keyup.enter)="loadAlertDefineTable()"
    [(ngModel)]="search"
  />
</div>

<nz-table
  #fixedTable
  [nzData]="defines"
  [nzPageIndex]="pageIndex"
  [nzPageSize]="pageSize"
  [nzTotal]="total"
  nzFrontPagination="false"
  [nzLoading]="tableLoading"
  nzShowSizeChanger
  [nzShowTotal]="rangeTemplate"
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
  [nzScroll]="{ x: '1240px', y: '100%' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzWidth="16%">{{ 'alert.setting.target' | i18n }}</th>
      <th nzAlign="center" nzWidth="14%">{{ 'alert.setting.expr' | i18n }}</th>
      <th nzAlign="center" nzWidth="8%">{{ 'alert.priority' | i18n }}</th>
      <th nzAlign="center" nzWidth="8%">{{ 'alert.setting.times' | i18n }}</th>
      <th nzAlign="center" nzWidth="20%">{{ 'alert.setting.template' | i18n }}</th>
      <th nzAlign="center" nzWidth="8%">{{ 'alert.setting.default' | i18n }}</th>
      <th nzAlign="center" nzWidth="8%">{{ 'alert.setting.enable' | i18n }}</th>
      <th nzAlign="center" nzWidth="15%">{{ 'common.edit' | i18n }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td nzAlign="center">
        <span *ngIf="data.field">
          {{ 'monitor.app.' + data.app | i18n }} / {{ 'monitor.app.' + data.app + '.metrics.' + data.metric | i18nElse : data.metric }} /
          {{ 'monitor.app.' + data.app + '.metrics.' + data.metric + '.metric.' + data.field | i18nElse : data.field }}
        </span>
        <span *ngIf="!data.field && data.metric === 'availability'">
          {{ 'monitor.app.' + data.app | i18n }} / {{ 'monitor.availability' | i18n }}
        </span>
      </td>
      <td nzAlign="center">
        <span>{{ data.expr }}</span>
      </td>
      <td nzAlign="center">
        <nz-tag *ngIf="data.priority == 0" nzColor="red">
          <i nz-icon nzType="bell" nzTheme="outline"></i>
          <span>{{ 'alert.priority.0' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.priority == 1" nzColor="orange">
          <i nz-icon nzType="bell" nzTheme="outline"></i>
          <span>{{ 'alert.priority.1' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
          <i nz-icon nzType="bell" nzTheme="outline"></i>
          <span>{{ 'alert.priority.2' | i18n }}</span>
        </nz-tag>
      </td>
      <td nzAlign="center">{{ data.times }}</td>
      <td nzAlign="center">{{ data.template }}</td>
      <td nzAlign="center">
        <nz-switch [(ngModel)]="data.preset" (ngModelChange)="updateAlertDefine(data)" name="preset"></nz-switch>
      </td>
      <td nzAlign="center">
        <nz-switch [(ngModel)]="data.enable" (ngModelChange)="updateAlertDefine(data)" name="enable"></nz-switch>
      </td>
      <td nzAlign="center">
        <button
          nz-button
          nzType="primary"
          (click)="onOpenConnectModal(data.id, data.app)"
          nz-tooltip
          [disabled]="data.preset"
          [nzTooltipTitle]="'alert.setting.connect' | i18n"
        >
          <i nz-icon nzType="link" nzTheme="outline"></i>
        </button>
        <button
          nz-button
          nzType="primary"
          (click)="onEditOneAlertDefine(data.id)"
          nz-tooltip
          [nzTooltipTitle]="'alert.setting.edit' | i18n"
        >
          <i nz-icon nzType="edit" nzTheme="outline"></i>
        </button>
        <button
          nz-button
          nzDanger
          nzType="primary"
          (click)="onDeleteOneAlertDefine(data.id)"
          nz-tooltip
          [nzTooltipTitle]="'alert.setting.delete' | i18n"
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

<!-- 新增或修改告警定义弹出框 -->
<nz-modal
  [(nzVisible)]="isManageModalVisible"
  [nzTitle]="isManageModalAdd ? ('alert.setting.new' | i18n) : ('alert.setting.edit' | i18n)"
  (nzOnCancel)="onManageModalCancel()"
  (nzOnOk)="onManageModalOk()"
  nzMaskClosable="false"
  nzWidth="70%"
  [nzOkLoading]="isManageModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #defineForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">{{ 'alert.setting.target' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-cascader
            required
            name="target"
            id="target"
            [nzShowSearch]="true"
            [nzPlaceHolder]="'alert.setting.target.place-holder' | i18n"
            [nzOptions]="appHierarchies"
            [(ngModel)]="cascadeValues"
            (ngModelChange)="cascadeOnChange($event)"
          ></nz-cascader>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="cascadeValues.length != 2">
        <nz-col [nzXs]="{ span: 24, offset: 0 }" [nzLg]="{ span: 8, offset: 16 }">
          <button nz-button [nzType]="isExpr ? 'primary' : 'default'" (click)="switchAlertRuleShow()">
            <i nz-icon nzType="code" nzTheme="outline"></i>
            {{ 'alert.setting.rule.switch-expr' | i18n }}
          </button>
        </nz-col>
      </nz-form-item>
      <nz-form-item *ngIf="cascadeValues.length != 2 && isExpr">
        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }">
          <nz-collapse>
            <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.expr.tip' | i18n">
              <nz-list nzSize="small" nzSplit="false">
                <nz-list-item *ngFor="let item of currentMetrics; let i = index">
                  <code>
                    {{ item.value }} :
                    {{
                      item.value == item.label
                        ? i == 0
                          ? ('alert.setting.target.tip' | i18n)
                          : ('alert.setting.target.other' | i18n)
                        : item.label
                    }}
                  </code>
                  <nz-tag [nzColor]="item.type === 0 ? 'success' : 'processing'">
                    {{ item.type === 0 ? ('alert.setting.number' | i18n) : ('alert.setting.string' | i18n) }}
                  </nz-tag>
                </nz-list-item>
                <nz-list-item>
                  <code>
                    {{ 'alert.setting.operator' | i18n }} : equals(str1,str2), contains(str1,str2), exists(keyName), matches(str,regex), ==,
                    <, <=, >, >=, !=, ( ), +, -, &&, ||
                  </code>
                </nz-list-item>
              </nz-list>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-col>
      </nz-form-item>
      <nz-form-item *ngIf="cascadeValues.length != 2 && isExpr">
        <nz-form-label [nzSpan]="7" nzFor="expr" nzRequired="true" [nzTooltipTitle]="'alert.setting.expr.label' | i18n">
          {{ 'alert.setting.rule' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              [(ngModel)]="define.expr"
              required
              rows="3"
              nz-input
              name="expr"
              id="expr"
              [placeholder]="('alert.setting.expr.example' | i18n) + ': responseTime&gt;40'"
            >
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="cascadeValues.length != 2 && !isExpr">
        <nz-form-label [nzSpan]="7" nzFor="rule" nzRequired="true" [nzTooltipTitle]="'alert.setting.rule.label' | i18n">
          {{ 'alert.setting.rule' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <div id="rule">
            <div style="width: 100%; margin-bottom: 2px" nz-row *ngFor="let alertRule of alertRules; let i = index">
              <nz-select
                [(ngModel)]="alertRule.metric"
                [ngModelOptions]="{ standalone: true }"
                nz-col
                nzSpan="8"
                [nzDropdownMatchSelectWidth]="false"
                [nzPlaceHolder]="'alert.setting.rule.metric.place-holder' | i18n"
              >
                <nz-option
                  *ngFor="let item of currentMetrics"
                  [nzValue]="item"
                  [nzLabel]="item.label ? item.label : item.value"
                  nzCustomContent
                >
                  {{ item.label ? item.label : item.value }}
                  <nz-tag [nzColor]="item.type === 0 ? 'success' : 'processing'">
                    {{
                      item.type === 0
                        ? ('alert.setting.number' | i18n)
                        : item.type === 3
                        ? ('alert.setting.time' | i18n)
                        : ('alert.setting.string' | i18n)
                    }}
                  </nz-tag>
                  <nz-tag *ngIf="item.unit">
                    {{ item.unit }}
                  </nz-tag>
                </nz-option>
              </nz-select>
              <nz-select
                [(ngModel)]="alertRule.operator"
                [ngModelOptions]="{ standalone: true }"
                nz-col
                nzSpan="4"
                [nzShowArrow]="false"
                [nzDropdownMatchSelectWidth]="false"
                style="text-align: center; font-weight: bolder"
                [nzDropdownStyle]="{ 'text-align': 'center', 'font-weight': 'bolder', 'font-size': 'larger' }"
                [nzPlaceHolder]="'alert.setting.rule.operator' | i18n"
              >
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 0 || alertRule.metric.type === 3"
                  [nzValue]="'>'"
                  [nzLabel]="'>'"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 0 || alertRule.metric.type === 3"
                  [nzValue]="'<'"
                  [nzLabel]="'<'"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 0 || alertRule.metric.type === 3"
                  [nzValue]="'=='"
                  [nzLabel]="'=='"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 0 || alertRule.metric.type === 3"
                  [nzValue]="'!='"
                  [nzLabel]="'!='"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 0 || alertRule.metric.type === 3"
                  [nzValue]="'<='"
                  [nzLabel]="'<='"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 0 || alertRule.metric.type === 3"
                  [nzValue]="'>='"
                  [nzLabel]="'>='"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
                  [nzValue]="'equals'"
                  [nzLabel]="'alert.setting.rule.operator.str-equals' | i18n"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
                  [nzValue]="'!equals'"
                  [nzLabel]="'alert.setting.rule.operator.str-no-equals' | i18n"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
                  [nzValue]="'contains'"
                  [nzLabel]="'alert.setting.rule.operator.str-contains' | i18n"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
                  [nzValue]="'!contains'"
                  [nzLabel]="'alert.setting.rule.operator.str-no-contains' | i18n"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
                  [nzValue]="'matches'"
                  [nzLabel]="'alert.setting.rule.operator.str-matches' | i18n"
                ></nz-option>
                <nz-option
                  *ngIf="!alertRule.metric || alertRule.metric.type === 1"
                  [nzValue]="'!matches'"
                  [nzLabel]="'alert.setting.rule.operator.str-no-matches' | i18n"
                ></nz-option>
                <nz-option [nzValue]="'exists'" [nzLabel]="'alert.setting.rule.operator.exists' | i18n"></nz-option>
                <nz-option [nzValue]="'!exists'" [nzLabel]="'alert.setting.rule.operator.no-exists' | i18n"></nz-option>
              </nz-select>
              <input
                nz-input
                [disabled]="alertRule.operator == 'exists' || alertRule.operator == '!exists'"
                [type]="alertRule.metric?.type === 0 ? 'number' : 'text'"
                [(ngModel)]="alertRule.value"
                [ngModelOptions]="{ standalone: true }"
                [placeholder]="
                  alertRule.operator == 'exists' || alertRule.operator == '!exists'
                    ? ''
                    : alertRule.metric?.type === 0
                    ? ('alert.setting.rule.numeric-value.place-holder' | i18n)
                    : ('alert.setting.rule.string-value.place-holder' | i18n)
                "
                nz-col
                nzSpan="10"
              />
              <button
                *ngIf="i != alertRules.length - 1 || i == 4"
                nz-button
                nz-col
                nzSpan="2"
                nzDanger
                nzGhost="true"
                (click)="onRemoveAlertRule(i)"
              >
                <span nz-icon nzType="minus"></span>
              </button>
              <button
                *ngIf="i === alertRules.length - 1 && i < 4"
                nz-button
                nzType="primary"
                nz-col
                nzSpan="2"
                nzGhost="true"
                (click)="onAddNewAlertRule()"
              >
                <span nz-icon nzType="plus"></span>
              </button>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="cascadeValues.length == 2">
        <nz-form-label [nzSpan]="7" nzFor="available">
          {{ 'monitor.availability' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="10">
          <span style="color: red">
            <nz-tag nzColor="error">{{ 'monitor.status.unavailable' | i18n }}</nz-tag>
            <nz-tag nzColor="error">{{ 'monitor.status.unreachable' | i18n }}</nz-tag>
            {{ 'alert.setting.trigger' | i18n }}
          </span>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="priority" [nzTooltipTitle]="'alert.setting.priority.tip' | i18n">
          {{ 'alert.priority' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-select [(ngModel)]="define.priority" nzPlaceHolder="Choose" name="priority" id="priority">
            <nz-option [nzValue]="0" [nzLabel]="'alert.priority.0' | i18n"></nz-option>
            <nz-option [nzValue]="1" [nzLabel]="'alert.priority.1' | i18n"></nz-option>
            <nz-option [nzValue]="2" [nzLabel]="'alert.priority.2' | i18n"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" [nzTooltipTitle]="'alert.setting.times.tip' | i18n">
          {{ 'alert.setting.times' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="999" [nzStep]="1" required name="duration" id="duration">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }">
          <nz-collapse>
            <nz-collapse-panel [nzActive]="isManageModalAdd" [nzHeader]="'alert.setting.template.tip' | i18n">
              <nz-list nzSize="small" nzSplit="false">
                <nz-list-item>
                  <code>&#36;&#123;app&#125; : {{ 'alert.setting.template.monitor-type' | i18n }}</code>
                </nz-list-item>
                <nz-list-item>
                  <code>&#36;&#123;metrics&#125; : {{ 'alert.setting.template.metrics-name' | i18n }}</code>
                </nz-list-item>
                <nz-list-item *ngIf="cascadeValues.length == 3">
                  <code>&#36;&#123;metric&#125; : {{ 'alert.setting.template.metric-name' | i18n }}</code>
                </nz-list-item>
                <nz-list-item *ngFor="let item of filterMetrics(currentMetrics, cascadeValues)">
                  <code
                    >&#36;{{ '{' + item.value + '}' }} :
                    {{
                      item.value == item.label
                        ? ('alert.setting.template.other-value' | i18n)
                        : ('alert.setting.template.metric-value' | i18n) + '-' + item.label
                    }}</code
                  >
                </nz-list-item>
              </nz-list>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-col>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" [nzTooltipTitle]="'alert.setting.template.label' | i18n">
          {{ 'alert.setting.template' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-textarea-count [nzMaxCharacterCount]="200">
            <textarea
              [(ngModel)]="define.template"
              rows="3"
              nz-input
              required
              name="template"
              id="template"
              [placeholder]="'alert.setting.template.example' | i18n"
            >
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="tags" [nzTooltipTitle]="'tag.bind.tip' | i18n">
          {{ 'tag.bind' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-tag
            *ngFor="let tag of define.tags; let i = index"
            [nzMode]="'closeable'"
            (nzOnClose)="onRemoveTag(tag)"
            style="margin-top: 4px"
          >
            {{ sliceTagName(tag) }}
          </nz-tag>
          <a (click)="onShowTagsModal()">
            <nz-tag style="margin-top: 4px">
              <i nz-icon nzType="plus"></i>
              {{ 'tag.new' | i18n }}
            </nz-tag>
          </a>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="preset" [nzTooltipTitle]="'alert.setting.default.tip' | i18n">
          {{ 'alert.setting.default' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="recoverNotice" [nzTooltipTitle]="'alert.setting.recover-notice.tip' | i18n">
          {{ 'alert.setting.recover-notice' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch
            [(ngModel)]="define.recoverNotice"
            [ngModelOptions]="{ standalone: true }"
            name="recoverNotice"
            id="recoverNotice"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" [nzTooltipTitle]="'alert.setting.enable.tip' | i18n">
          {{ 'alert.setting.enable' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" name="enable" id="enable"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>

<!-- 选择TAG弹出框 -->
<nz-modal
  [(nzVisible)]="isTagManageModalVisible"
  [nzTitle]="'tag.bind' | i18n"
  (nzOnCancel)="onTagManageModalCancel()"
  (nzOnOk)="onTagManageModalOk()"
  nzMaskClosable="false"
  nzWidth="30%"
  [nzOkLoading]="isTagManageModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <input
      style="margin-left: 5px; width: 50%; border-radius: 9px; text-align: center"
      nz-input
      type="text"
      [placeholder]="'tag.search' | i18n"
      nzSize="default"
      (keyup.enter)="loadTagsTable()"
      [(ngModel)]="tagSearch"
    />
    <button nz-button nzType="primary" routerLink="/setting/tags" style="margin-left: 5px; border-radius: 9px">
      <i nz-icon nzType="setting" nzTheme="outline"></i>
      {{ 'tag.setting' | i18n }}
    </button>
    <nz-table #smallTable nzSize="small" [nzData]="tags" [nzPageSize]="8" [nzLoading]="tagTableLoading">
      <thead>
        <tr>
          <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="tagCheckedAll" (nzCheckedChange)="onTagAllChecked($event)"></th>
          <th nzAlign="left">{{ 'tag' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data">
          <td nzAlign="center" nzLeft [nzChecked]="checkedTags.has(data)" (nzCheckedChange)="onTagItemChecked(data, $event)"></td>
          <td nzAlign="left">
            <nz-tag *ngIf="data.tagValue == undefined || data.tagValue.trim() == ''" [nzColor]="data.color">{{ data.name }}</nz-tag>
            <nz-tag *ngIf="data.tagValue != undefined && data.tagValue.trim() != ''" [nzColor]="data.color">
              {{ data.name + ':' + data.tagValue }}
            </nz-tag>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-modal>

<!-- 关联告警定义与监控关系弹出框 -->

<nz-modal
  [(nzVisible)]="isConnectModalVisible"
  [nzTitle]="'alert.setting.connect' | i18n"
  (nzOnCancel)="onConnectModalCancel()"
  (nzOnOk)="onConnectModalOk()"
  nzMaskClosable="false"
  nzWidth="60%"
  [nzOkLoading]="isConnectModalOkLoading"
>
  <nz-transfer
    *nzModalContent
    [nzDataSource]="transferData"
    nzShowSearch="true"
    nzShowSelectAll="false"
    [nzRenderList]="[renderList, renderList]"
    (nzChange)="change($event)"
    style="overflow-x: scroll"
  >
    <ng-template
      #renderList
      let-items
      let-direction="direction"
      let-stat="stat"
      let-onItemSelectAll="onItemSelectAll"
      let-onItemSelect="onItemSelect"
    >
      <nz-table #t [nzData]="$asTransferItems(items)" nzSize="small">
        <thead>
          <tr>
            <th [nzChecked]="stat.checkAll" [nzIndeterminate]="stat.checkHalf" (nzCheckedChange)="onItemSelectAll($event)"></th>
            <th *ngIf="direction == 'left'">{{ 'alert.setting.connect.left' | i18n }}</th>
            <th *ngIf="direction == 'right'">{{ 'alert.setting.connect.right' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
            <td [nzChecked]="!!data.checked" (nzCheckedChange)="onItemSelect(data)"></td>
            <td>{{ data.name }}</td>
          </tr>
        </tbody>
      </nz-table>
    </ng-template>
  </nz-transfer>
</nz-modal>

<!-- 导出告警定义弹出框 -->
<nz-modal
  [(nzVisible)]="isSwitchExportTypeModalVisible"
  [nzTitle]="'monitors.export.switch-type' | i18n"
  nzOkDisabled="true"
  [nzFooter]="switchExportTypeModalFooter"
>
  <ng-container *nzModalContent>
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportDefines('YAML')" [nzLoading]="exportYamlButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'YAML' } }}
      </button>
    </p>
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportDefines('JSON')" [nzLoading]="exportJsonButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'JSON' } }}
      </button>
    </p>
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportDefines('EXCEL')" [nzLoading]="exportExcelButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'EXCEL' } }}
      </button>
    </p>
  </ng-container>
</nz-modal>
